<div ...attributes>
  <Apis::RewriteForm @model={{this.rewriteModel}} @collection={{this.model.rewrites}} @openModal={{this.openModal}} />

  <table id="rewrites_table" class="table table-striped table-sm">
    <thead>
      <tr>
        <th style="width: 135px;">Matching Type</th>
        <th style="width: 125px;">HTTP Method</th>
        <th>From</th>
        <th>To</th>
        <th></th>
        <th class="reorder-handle"></th>
      </tr>
    </thead>
    <tbody>
      {{#if this.model.rewrites}}
        {{#each this.model.rewrites as |rewrite|}}
          <tr data-guid={{guid-for rewrite}}>
            <td>{{rewrite.matcherType}}</td>
            <td>{{rewrite.httpMethod}}</td>
            <td>{{rewrite.frontendMatcher}}</td>
            <td>{{rewrite.backendReplacement}}</td>
            <td class="table-row-actions">
              <a href="#" {{action "edit" rewrite}}><FaIcon @icon="pencil-alt" />{{t "Edit"}}</a>
              <a href="#" class="remove-action" {{action "remove" rewrite}}><FaIcon @icon="times" />{{t "Remove"}}</a>
            </td>
            <td class="reorder-handle"><FaIcon @icon="bars" /></td>
          </tr>
        {{/each}}
      {{else}}
        <tr class="empty"><td colspan="6">{{sprintf (t "No request rewrites have been added yet. Click \"%s\" below to get started.") (t "Add Rewrite")}}</td></tr>
      {{/if}}
    </tbody>
  </table>
  <div class="row">
    <div class="col-6">
      <button type="button" class="btn btn-light btn-sm" {{action "add"}}><FaIcon @icon="plus-circle" /> {{t "Add Rewrite"}}</button>
    </div>
    <div class="col-6 text-right">
      {{#if this.sortable.isReorderable}}
        <button type="button" id="rewrites_reorder" class="btn btn-light btn-sm" {{on "click" (fn this.sortable.reorderCollection "rewrites")}}><FaIcon @icon="bars" /> <span class="reorder-button-text">{{t "Reorder"}}</span></button>
      {{/if}}
    </div>
  </div>
</div>
